export default function(vdom, container) {
  container.innerHTML = createElement(vdom)
}

const createElement = vdom => {
  const [type, props, ...children] = vdom
  console.log(vdom)
  if ('function' === typeof type) {
    if (type.prototype && 'function' === typeof type.prototype.render) {
      const Component = type
      const component = new Component({ ...props, children })
      return createElement(component.render())
    }
    const component = type
    return createElement(component({ ...props, children }))
  }
  let tag = `<${type}`

  for (let key in props) {
    tag += ` ${key}="${props[key]}"`
  }

  tag += '>'

  children.forEach(child => {
    const childNode = createChild(child)
    if (childNode) {
      tag += childNode
    }
  })

  tag += `</${type}>`

  return tag
}

const createChild = child => {
  if (Array.isArray(child)) {
    return createElement(child)
  } else if (child && 'boolean' !== typeof child) {
    return child
  }
}